<template>
	<view>
		<view class="servedetail" v-if="info">
			<view class="main-box">
				<view class="swiper-box">
					<swiper class="swiperimg" @change="bindchange">
						<swiper-item v-for="(item,index) in tool.split(info.images,',')">
							<image :src="cdn(item)" class="swiperimg" mode="aspectFill" />
						</swiper-item>
					</swiper>
					<view class="tips z-padding-tb-8 z-padding-lr-16 z-radius-32 z-font-24">{{ current + 1 }}/{{ tool.split(info.images, ',').length }}</view>
				</view>
				<view class="activeone z-padding-32">
					<view class="next_one z-radius-24">
						<view class="next_one_top">
							<view class="next_one_top_text z-padding-16 z-font-24">最快{{ info.response_hour }}小时上门</view>
						</view>
						<view class="money z-font-w z-padding-lr-32" style="margin-top: -30rpx">
							<view class="z-font-30 z-margin-t-8">￥</view>
							<view class="z-font-40 z-font-w">{{ info.price }}</view>
						</view>
						<view class="z-padding-32 name">
							<view class="z-font-w z-font-32">{{ info.name }}</view>
							<view class="text_999 z-font-24">已售{{ info.salenums }}</view>
						</view>
					</view>
					<view class="flow-box z-margin-t-24">
						<block v-for="(item,index) in tool.split(info.flow_path_images,',')">
							<image :src="tool.cdn(item)" class="info-img" mode="widthFix"></image>
						</block>
					</view>

					<view class="servesm">—— 服务说明 ——</view>
					<block v-for="(item,index) in tool.split(info.illustrate_images,',')">
						<image :src="tool.cdn(item)" class="info-img" mode="widthFix"></image>
					</block>
				</view>
			</view>
			<view class="bottom" :style="'padding-bottom:' + safeBottom" v-if="info.spec_type === 1">
				<view class="bottom_content z-padding-lr-32 z-padding-t-32">
					<view class="vbutton z-radius-24">
						<u-button  type="primary" color="#07C160" @tap="openshow" size="large">查看规格</u-button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup mode="bottom" :show="show" @close="onClose">
			<view class="popcontent z-padding-lr-32 z-padding-t-32 z-radius-tl-20">
				<view class="popcontent_top">
					<image :src="tool.cdn(info.image)" class="popcontent_img z-margin-r-32" mode="aspectFill" />
					<view class="popcontent_top_text">
						<view>{{ info.name }}</view>
						<view class="money">
							￥
							<view class="z-font-w">56</view>
						</view>
					</view>
				</view>
				<view class="specification z-margin-tb-32" :style="'padding-bottom:' + safeBottom">
					<view class="text_999 z-font-24">选择项目</view>
					<view class="project_box z-margin-tb-24">
						<view
							@tap="chooseSku(item.id)"
							class="z-flex-c z-margin-b-24"
							:class="item.id==goods_sku_id?'project_one':'project_item'"
							v-for="(item,index) in info.sku"
						>
							<view class="z-flex-1">
								<view>{{ info.name }}</view>
								<view class="z-margin-t-16 z-font-24 text_999">{{ tool.join(tool.split(item.name, ','), '/') }}</view>
							</view>
							<view class="money">
								￥
								<view class="z-font-w">{{ item.price }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			show: false,
			id: '',
			info: '',
			goods_sku_id: '',
			num: 1,
			skill_id: '',
			safeBottom: `20px`
		};
	},
	onLoad(options) {
	    this.id = options.id
	    this.getInfo()
	  },
	methods: {
		onClose() {
			this.show = false
		},
		collect() {
			this.http.get('follow/handlefollow', {
				follow_id: this.id,
				type: 1,
				state: this.info.followState ? 0 : 1
			}).then((res) => {
				this.info.followState = this.info.followState ? 0 : 1;
				this.info = this.info
			});
		},
		chooseSku(e) {
			this.goods_sku_id = e
		},
		add() {
			this.num = ++this.num
		},
		sub() {
			if (this.num === 1) {
				return;
			}
			this.num = ++this.num
		},
		openshow() {
			if (this.info.spec_type === 1) {
				this.show = true
			} else {
				if (this.info.choose_skill_type === 1) {
					if (this.skill_id) {
						this.util.skip(
							'/service/makeorder/makeorder?goods_sku_id=' +
								this.goods_sku_id +
								'&num=' +
								this.num +
								'&goods_id=' +
								this.id +
								'&skill_id' +
								this.skill_id
						);
					} else {
						this.util.skip('/service/servelist/servelist?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id);
					}
				} else {
					if (this.skill_id) {
						util.skip(
							'/service/makeorder/makeorder?goods_sku_id=' +
								this.goods_sku_id +
								'&num=' +
								this.num +
								'&goods_id=' +
								this.id +
								'&skill_id' +
								this.skill_id
						);
					} else {
						this.util.skip('/service/makeorder/makeorder?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id);
					}
				}
			}
		},

		preimg() {
			uni.previewImage({
				current: '../../static/index/bg.png',
				urls: ['../../static/index/bg.png']
			});
		},

		bindchange(event) {
			this.current = event.detail.current
		},
		getInfo() {
			this.http.get('goods/goodsinfo', {
				id: this.id
			}).then((res) => {
				this.info = res.data,
				this.goods_sku_id = res.data.sku[0] ? res.data.sku[0].id : ''
			});
		}
	}
};
</script>

<style>
.servedetail {
	background-color: #edf1f4;
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow-y: auto;
}
.swiper-box {
	position: relative;
}
.tabs_box::-webkit-scrollbar {
	display: none;
}
.swiperimg {
	width: 750rpx;
	height: 750rpx;
}
.activeone {
	box-sizing: border-box;
}
.tips {
	position: absolute;
	right: 50rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	top: 600rpx;
}
.next_one {
	box-sizing: border-box;
	margin: 0 auto;
	background-color: #fff;
	position: relative;
}
.next_one_top {
	display: flex;
	justify-content: flex-end;
}
.next_one_top_text {
	background: rgba(98, 203, 129, 0.1);
	color: #62cb81;
	border-radius: 0 20rpx 0 20rpx;
}
.money {
	display: flex;
	align-items: center;
	color: var(--mainmoneycolor);
}
.name {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.next_two {
	background: linear-gradient(180deg, #f0faf3 0%, #ffffff 100%);
	width: 90vw;
	box-sizing: border-box;
	margin: 0 auto;
}
.next_two_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fourimg {
	display: flex;
	justify-content: space-between;
}
.fourimg_item {
	width: 64rpx;
	height: 64rpx;
}
.van-steps {
	background-color: rgba(0, 0, 0, 0) !important;
	margin-top: -20rpx;
}
.fourtext {
	display: flex;
	justify-content: space-between;
}
.fourtext_item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.comment_box {
	width: 90vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.comment_box_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item {
	background-color: #fff;
	box-sizing: border-box;
}
.comment_item_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.comment_item_top_left {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item_top_left_text {
	display: flex;
	flex-direction: column;
}

.comment_item_img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 50%;
}
.scroll_box {
	width: 600rpx;
	white-space: nowrap;
}
.scroll_box_imgbox {
	display: flex;
}
.scroll_box_img {
	width: 190rpx;
	height: 190rpx;
}
.scroll_box_img:nth-child(n + 2) {
	margin-left: 30rpx;
}
.servesm {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b738b;
	margin-bottom: 30rpx;
}
.bottom {
	background-color: #fff;
	width: 100vw;
}
.bottom_content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom_content_img {
	width: 40rpx;
	height: 40rpx;
}
.bottom_content_left {
	align-items: center;
	display: flex;
	flex-direction: column;
}
.vbutton {
	flex: 1;
}
.popcontent {
	position: relative;
	z-index: 23 !important;
}

.popcontent_top {
	display: flex;
	align-items: center;
}
.project_box {
	max-height: 600rpx;
	overflow-y: auto;
}
.project_box::-webkit-scrollbar {
	display: none;
}
.popcontent_img {
	width: 114rpx;
	height: 114rpx;
}
.popcontent_top_text {
	display: flex;
	flex-direction: column;
	height: 114rpx;
	justify-content: space-around;
}
.money {
	display: flex;
	color: var(--mainmoneycolor);
}
.specification_box {
	display: flex;
	flex-wrap: wrap;
}

.specification_item {
	padding: 10rpx 40rpx;
	background-color: #f5f7f9;
	border-radius: 15rpx;
}

.one {
	border: 1rpx solid #62cb81;
	background-color: #f0faf3;
	border-radius: 15rpx;
	color: #62cb81;
	padding: 10rpx 40rpx;
}
.project_item {
	height: 120rpx;
	box-sizing: border-box;
	padding: 0 40rpx;
	background-color: #f5f7f9;
	border-radius: 15rpx;
}
.project_one {
	height: 120rpx;
	border: 1rpx solid #62cb81;
	background-color: #f0faf3;
	border-radius: 15rpx;
	color: #62cb81;
	padding: 0 40rpx;
}

.info-img {
	width: 100%;
}
.step {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.icon {
	width: 32rpx;
	height: 32rpx;
}

.levelBox {
	background: #1c274c;
	height: 70rpx;
	margin-top: -30rpx;
	padding-top: 30rpx;
}
.level-icon {
	width: 30rpx;
	height: 30rpx;
}
.level-info {
	color: #f7c566;
}
</style>
